<template>
  <el-container
    v-loading="data.loading"
    class="todo"
    direction="vertical"
    :data-color-mode="data.theme"
  >
    <el-header class="todo-header">
      <el-row>
        <el-col class="todo-header-title" :span="12">
          <el-icon class="icon">
            <component :is="curSelectedGroup.icon || 'ElementPlus'" />
          </el-icon>
          <span>{{ curSelectedGroup.gname || '未命名标题' }}</span>
        </el-col>
        <el-col class="todo-header-options" :span="12">
          <!-- <el-tooltip
            placement="left"
            effect="light"
            content="分享"
            raw-content
          >
            <el-button>
              <el-icon><share /></el-icon>
            </el-button>
          </el-tooltip> -->

          <el-popover
            popper-class="omit-popover"
            placement="bottom-end"
            width="360px"
            :show-arrow="false"
            trigger="click"
          >
            <template #reference>
              <el-button>
                <el-icon><more-filled /></el-icon>
              </el-button>
            </template>
            <template #default>
              <el-container class="omit-container" direction="vertical">
                <el-row class="sort" height="auto">
                  <!-- <el-menu
                    class="sort-menu"
                    ref="sortMenuRef"
                    backgroudn-color="transparent"
                  >
                    <el-sub-menu index="1">
                      <template #title>
                        <el-row style="width: 100%;">
                          <el-col class="omit-left" :span="20">
                            <el-icon class="omit-icon"><Sort /></el-icon>
                            <span>排序依据</span>
                          </el-col>
                          <el-col class="omit-right" :span="4" style="text-align: right;">
                            <el-icon><arrow-right /></el-icon>
                          </el-col>
                        </el-row>
                      </template>
                      <el-menu-item
                        v-for="(sort, index) in sortList"
                        :key="index"
                        :index="`1-${index}`"
                      >{{ sort.label }}</el-menu-item>
                    </el-sub-menu>
                  </el-menu> -->
                </el-row>
                <el-container direction="vertical" class="theme-picker">
                  <el-row style="margin-bottom: 5px;">主题</el-row>
                  <el-row class="theme-wrapper">
                    <el-col :span="6" v-for="theme in 14" :key="theme">
                      <div
                        class="color-block"
                        :theme-mode="theme"
                        @click="selectTheme(theme)">
                      </div>
                    </el-col>
                  </el-row>
                </el-container>
              </el-container>
            </template>
          </el-popover>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="todo-main">
      <el-scrollbar style="padding: 0 10px;" height="100%">
        <el-row v-show="undoneTodo.length > 0">
          <el-col>
            <todo-item
              v-for="todo in undoneTodo"
              :key="todo.id"
              :data="todo"
              :changeTodo="changeTodo"
              :loading="openLoading"
              @openDrawer="openDrawer"
            ></todo-item>
          </el-col>
        </el-row>
        <el-row class="todo-done" v-show="doneTodo.length > 0">
          <el-col>
            <el-button
              v-show="data.requestFinish && doneTodo.length > 0"
              :icon="data.hiddenDone ? 'arrowUp' : 'arrowDown'"
              size="large"
              class="unfold"
              @click="data.hiddenDone = !data.hiddenDone"
            >
              已完成 &nbsp;
              <span>{{ doneTodo.length }}</span>
            </el-button>
          </el-col>
          <el-col v-show="!data.hiddenDone">
            <todo-item
              v-for="todo in doneTodo"
              :key="todo.id"
              :data="todo"
              :changeTodo="changeTodo"
              :loading="openLoading"
              @openDrawer="openDrawer"
            ></todo-item>
          </el-col>
        </el-row>
        <div style="margin-bottom: 15rem;"></div>
        <div
          v-show="data.todos.length == 0"
          class="no-todo-show"
        >
          <img height="50" :src="noTodoImg" alt="create your todo list">
          <span class="text">暂无待办内容</span>
        </div>
      </el-scrollbar>
      <el-row class="add-todo" v-show="!data.searchMode">
        <el-input
          class="add-todo-input"
          :style="{ 'opacity': data.addTodo.content ? 1 : '.9' }"
          size="large"
          placeholder="添加待办"
          v-model="data.addTodo.content"
        >
          <template #prefix>
            <div class="prefix">
              <el-icon class="el-input__icon"><el-icon><plus /></el-icon></el-icon>
            </div>
          </template>
          <template #append>
            <div class="add-todo-btns">
              <el-popover
                placement="top-end"
                title="备注:"
                :width="400"
                trigger="click"
              >
                <template #reference>
                  <el-button
                    type="info"
                    icon="Notebook"
                    title="添加备注"
                    @click="">
                  </el-button>
                </template>
                <el-input rows="5" type="textarea" v-model="data.addTodo.note"></el-input>
              </el-popover>

              <el-date-picker
                prefix-icon="Calendar"
                class="date-picker"
                v-model="data.addTodo.scheduledTime"
                size="default"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />

              <el-button
                type="info"
                icon="Close"
                title="清空"
                @click="clearAddTodo"
              />

              <el-button
                type="info"
                icon="Check"
                title="确定"
                @click="addTodo">
              </el-button>
            </div>
          </template>
        </el-input>
      </el-row>
    </el-main>
    <el-drawer
      v-model="data.drawer"
      direction="rtl"
      @closed="handleDrawerClosed"
    >
      <el-row class="drawer-content">
        <el-col class="todo-preview border">
          <div class="preview-title">
            <el-icon><List /></el-icon>待办内容:
            <el-tag style="margin-left: 5px;" :type="getTodoStatus(getCurTodo.done, getCurTodo.scheduledTime).type">
              {{ getTodoStatus(getCurTodo.done, getCurTodo.scheduledTime).text }}
            </el-tag>
          </div>
          <div class="preview-content">
            <el-input
              class="content-input"
              :style="{ 'text-decoration': getCurTodo.done ? 'line-through' : 'none' }"
              size="large"
              v-model="getCurTodo.content"
            ></el-input>
          </div>
        </el-col>
        <el-col class="todo-action border">
          <ul class="has-hover-style">
            <!-- <li><el-icon><Calendar /></el-icon>添加截止日期</li> -->
            <!-- <li><el-icon><AlarmClock /></el-icon>下次登录提醒我</li> -->
            <li @click="openDialog"><el-icon><Remove /></el-icon>移动到其他分组</li>
          </ul>
        </el-col>
        <el-col class="todo-info border">
          <ul>
            <li>
              <div class="label">
                <el-icon><Calendar /></el-icon>
                <span>创建于:</span>
              </div>
              <div class="time">{{ getCurTodo.createTime }}</div>
            </li>
            <li>
              <div class="label">
                <el-icon><Calendar /></el-icon>
                <span>截止于:</span>
              </div>
              <el-date-picker
                class="date-picker"
                v-model="getCurTodo.scheduledTime"
                clearable
                size="default"
                type="datetime"
                :disabled-date="(time: Date) => { time.getTime() < new Date().getTime() }"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :placeholder="getCurTodo.scheduledTime || '未设定'"
              />
            </li>
            <li v-if="!!getCurTodo.updateTime">
              <div class="label">
                <el-icon><Calendar /></el-icon> 
                <span>更新于:</span>
              </div>
              <div class="time">
                {{ getCurTodo.updateTime }}
              </div>
            </li>
          </ul>
        </el-col>
        <el-col class="todo-note border">
          <span class="tips">添加备注:</span>
          <el-input
            class="note-input"
            type="textarea"
            rows="10"
            maxlength="300"
            show-word-limit
            clearable
            v-model="getCurTodo.note">
          </el-input>
        </el-col>
        <el-col class="todo-btns">
          <el-button
            type="danger"
            plain
            icon="delete"
            size="large"
            link
            @click="deleteTodo(getCurTodo.id, getCurTodo.content)"
          >
            删除
          </el-button>
          <el-button
            type="primary"
            plain
            icon="delete"
            size="large"
            @click="data.drawer = false"
          >
            确定
          </el-button>
        </el-col>
      </el-row>
    </el-drawer>
    <el-dialog
      v-model="data.dialogVisible"
      title="选择分组"
      width="50%"
    >
      <el-row clas="dialog-content">
        <el-table
          :data="data.groups.filter(group => group.id != getTodoGroupId)"
          style="width: 100%"
          stripe
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          highlight-current-row
        >
          <el-table-column prop="gname" label="分组名称" />
          <el-table-column prop="descr" label="描述" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="moveToGroup(row.id, row.gname)">移动到这里</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-dialog>
  </el-container>
</template>

<script lang="ts" setup>
import { reactive, computed, watch, onBeforeUnmount } from 'vue'
import { Group, Todo } from '@/types/types'
import TodoItem from '#/todoItem.vue'
import lStorage from '@/utils/localStroage'
import { getTodoApi, updateTodoApi, moveToGroupApi, deleteTodoApi, addTodoApi } from '&/todo'
import { SUCCESS_CODE } from '@/config/requestCode'
import { openConfirmMessageBox, openMessage } from '@/utils/elComponents'
import { getCurrentDateStr } from '@/utils/util'
import { getGroupApi } from '&/group'
import { bus } from '@/utils/util'
import noTodoImg from '@/assets/images/c8a54.png'

enum sortEnum {
  Important,
  DueDate,
  MyDay,
  Letter,
  CreateDate
}
type Sort = {
  label: string,
  value: sortEnum
}
const { curSelectedGroup } = defineProps<{
  curSelectedGroup: {
    id: number,
    gname: string,
    icon: string
  }
}>()
// const sortList: Sort[] = [
//   { label: '重要性', value: sortEnum.Important },
//   { label: '到期日期', value: sortEnum.DueDate },
//   { label: '以添加到"我的一天"', value: sortEnum.MyDay },
//   { label: '字母排序', value: sortEnum.Letter },
//   { label: '创建日期', value: sortEnum.CreateDate }
// ]
const data = reactive<{
  searchMode: boolean,
  theme: number,
  todos: Todo[],
  drawer: boolean,
  curTodoId: number,
  hiddenDone: boolean,
  requestFinish: boolean,
  loading: boolean,
  dialogVisible: boolean,
  groups: Group[],
  addTodo: { [propName: string]: any }
}>({
  searchMode: false,
  theme: 4,
  todos: [],
  drawer: false,
  curTodoId: -1,
  hiddenDone: false,
  requestFinish: false,
  loading: false,
  dialogVisible: false,
  groups: [],
  addTodo: {
    content: '',
    note: '',
    scheduledTime: '',
  }
})
let curTodoTemp: { [propName: string]: string } = {
  content: '',
  scheduledTime: '',
  note: '',
}
// const sortMenuRef = ref()
// const closeMenu = () => {
//   sortMenuRef.value.close('1')
// }
const selectTheme = (theme: number | null) => {
  if (theme != null) {
    data.theme = theme
    lStorage.set('todo-theme', theme)
  }
}
const doneTodo = computed(() => data.todos
  .filter(todo => todo.done)
  .sort((a: Todo, b: Todo) => b.star - a.star)
)
const undoneTodo = computed(() => data.todos
  .filter(todo => !todo.done)
  .sort((a: Todo, b: Todo) => b.star - a.star)
)
const getCurTodo = computed(() => {
  let _todo: Todo = {
    id: -1,
    groupId: -1,
    done: -1,
    star: -1,
    content: '',
    note: '',
    createTime: '',
    updateTime: '',
    scheduledTime: ''
  }
  let todo: Todo | undefined = data.todos.find(todo => todo.id === data.curTodoId)
  return todo ? todo : _todo
})
const getTodoGroupId = computed(() => {
  const todo = data.todos.find(todo => todo.id === data.curTodoId)
  return todo ? todo.groupId : -1
})
const getTodo = async (groupId = curSelectedGroup.id) => {
  if (data.searchMode) {
    bus.emit('reSearch')
    return
  }
  if (groupId < 0) {
    data.todos = []
    data.curTodoId = -1
    console.log('reset data.todos', data.todos)
    return
  }
  data.loading = true
  const resp = await getTodoApi(groupId)
  if (resp && resp.code == SUCCESS_CODE) {
    data.todos = resp.data
  }
  data.requestFinish = true
  data.loading = false
}
const moveToGroup = async (groupId: number, gname: string) => {
  data.dialogVisible = false
  data.drawer = false
  data.loading = true

  const curTodo = data.todos.find(todo => todo.id === data.curTodoId)
  if (!curTodo) return

  const resp = await moveToGroupApi([data.curTodoId, groupId])
  if (resp && resp.code == SUCCESS_CODE) {
    bus.emit('groupCountChange', {
      groupId: curTodo.groupId,
      moveToGroupId: groupId,
      type: 'move'
    })
    await getTodo()
    openMessage('success', `已移入"${gname}"分组!`)
  } else {
    openMessage('error', '移入分组错误!')
  }
  data.loading = false
}
const openDrawer = (todoId: number) => {
  data.curTodoId = todoId
  const curTodo = data.todos.find(todo => todo.id === todoId)
  if (curTodo) {
    curTodoTemp.scheduledTime = curTodo.scheduledTime
    curTodoTemp.content = curTodo.content
    curTodoTemp.note = curTodo.note
  }
  data.drawer = true
}
const openDialog = async () => {
  data.drawer = false
  data.loading = true
  const resp = await getGroupApi()
  if (resp && resp.code == SUCCESS_CODE) {
    data.groups = resp.data
    data.dialogVisible = true
  } else {
    openMessage('error', '获取分组信息错误!')
  }
  data.loading = false
}
const handleDrawerClosed = async () => {
  const updateTodo = data.todos.find(todo => todo.id === data.curTodoId)
  if (!updateTodo) {
    return
  }
  if (
    curTodoTemp.scheduledTime === updateTodo.scheduledTime &&
    curTodoTemp.content === updateTodo.content &&
    curTodoTemp.note === updateTodo.note
  ) {
    return
  }
  const resp = await updateTodoApi(updateTodo)
  if (resp && resp.code == SUCCESS_CODE) {
    updateTodo.updateTime = getCurrentDateStr()
  }
  data.curTodoId = -1
}
const changeTodo = (type: 'done' | 'star', todoId: number, status: number) => {
  if (type === 'done') {
    data.todos.filter(todo => todo.id === todoId)[0].done = status
  } else if (type === 'star') {
    data.todos.filter(todo => todo.id === todoId)[0].star = status
  }
}
const openLoading = (loading: boolean) => {
  data.loading = loading
}
const deleteTodo = async (todoId: number, todoContent: string) => {
  try {
    await openConfirmMessageBox(`确定删除待办"${todoContent}"?`, '')
  } catch (err) { return }

  data.drawer = false
  data.loading = true

  const curTodo = data.todos.find(todo => todo.id === todoId)
  if (!curTodo) return

  const resp = await deleteTodoApi(todoId)
  if (resp && resp.code == SUCCESS_CODE) {
    bus.emit('groupCountChange', {
      groupId: curTodo.groupId,
      type: 'minus'
    })
    await getTodo()
    openMessage('success', '删除成功!')
  } else {
    openMessage('error', '删除失败!')
  }
  data.loading = false
}
const addTodo = async () => {
  if (curSelectedGroup.id < 0) {
    openMessage('warning', '请先新建且选中一个分组!')
    return
  }
  if (!data.addTodo.content.trim()) {
    openMessage('warning', '待办内容不能为空!')
    return
  }

  data.loading = true
  const resp = await addTodoApi({
    groupId: curSelectedGroup.id,
    ...data.addTodo
  })
  if (resp && resp.code == SUCCESS_CODE) {
    bus.emit('groupCountChange', {
      groupId: curSelectedGroup.id,
      type: 'add'
    })
    clearAddTodo()
    await getTodo()
    openMessage('success', '新建待办成功!')
  } else {
    openMessage('error', '新建待办发生错误!')
  }
  data.loading = false
}
const getTodoStatus = (done: number, scheduledTime: string) => {
  if (done) {
    return {
      type: 'success',
      text: '完成'
    }
  }
  if (scheduledTime) {
    const isExpired = new Date(scheduledTime).getTime() > new Date().getTime()
    return {
      type: isExpired ? 'warning' : 'danger',
      text: isExpired ? '待完成' : '已过期'
    }
  }
  return {
    type: 'warning',
    text: '待完成'
  }
}
const clearAddTodo = () => {
  data.addTodo.content = ''
  data.addTodo.note = ''
  data.addTodo.scheduledTime = ''
}

bus.on('search', (searchData: any) => {
  data.searchMode = true
  data.todos = searchData
  console.log('update search todos', data.todos)
})
onBeforeUnmount(() => { bus.off('search') })

selectTheme(lStorage.get<number>('todo-theme'))
watch(() => curSelectedGroup.id, (groupId) => {
  if (groupId > 0) {
    data.searchMode = false
  }
  getTodo(groupId)
  clearAddTodo()
})
</script>

<style lang="scss" scoped>
// 背景色
$background-color-list: // data-color-mode = ?
  #788CDE, // 1
  #A05FA1, // 2
  #C44F6F, // 3
  #C5524D, // 4
  #2D8660, // 5
  #28837E, // 6
  #6A7883, // 7
  #DFEDF9, // 8
  #F2E7F9, // 9
  #FFE4E9, // 10
  #F9E8DE, // 11
  #D5F1E5, // 12
  #D4F1EF, // 13
  #E7ECF0; // 14
$text-color-list: 
  #fff, #fff, #fff, #fff, #fff, #fff, #fff,
  $text-color, $text-color, $text-color, $text-color, $text-color, $text-color, $text-color;

.omit-popover {
  $padding: 10px 5px;
  .omit-container {
    margin: -12px;
    font-size: 16px;
  }
  .sort {
    border-radius: $border-radius $border-radius 0 0;
    @include transition('background-color', $default-transition-duration);
    &:hover {
      background-color: $hover-color;
    }
    .omit-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .omit-icon {
        margin-right: 15px;
      }
    }
    .omit-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    ::v-deep(.el-menu) {
      width: 100%;
      border-right: none;
      .el-sub-menu {
        position: relative;
        .el-sub-menu__title {
          height: 40px;
          line-height: 20px;
          padding: $padding !important;
          cursor: pointer;
          &:hover {
            background-color: $hover-color !important;
          }
          .el-sub-menu__icon-arrow { display: none; }
        }
        .el-menu.el-menu--inline {
          position: absolute;
          top: -1px;
          left: -4px;
          transform: translate(-100%, 0);
          width: 50%;
          border-radius: $border-radius;
          overflow: hidden;
          .el-menu-item {
            min-width: auto;
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }
  .theme-picker {
    padding: $padding;
    .theme-wrapper {
      .el-col {
        @for $i from 1 through 14 {
          &:nth-child(#{$i}) .color-block {
            background: #{nth($background-color-list, $i)};
            color: #{nth($text-color-list, $i)};
          }
        }
      }
      .color-block {
        padding: calc(50% - 2px);
        margin: 2px;
        background-position: center;
        background-size: cover;
        cursor: pointer;
      }
    }
  }
}

.todo {
  padding: 2%;
  height: 100%;
  width: 100%;
  background: var(--background-color);
  color: var(--text-color);
  @include transition('all', 1s);

  @each $color in $background-color-list {
    $index: index($background-color-list, $color);
    &[data-color-mode="#{$index}"] {
      --background-color: #{$color};
      --text-color: #{nth($text-color-list, $index)};
    }
  }

  .todo-header {
    padding: 0 10px;
    font-size: 30px;

    .todo-header-title {
      text-align: left;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .icon {
        font-size: 35px;
        margin-right: 20px;
      }
    }

    .todo-header-options {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      $btn-size: 35px;
      ::v-deep(.el-button) {
        background-color: transparent;
        padding: 0;
        width: $btn-size;
        height: $btn-size;
        border: none;
        &:hover {
          background-color: rgba(255, 255, 255, .6);
        }
        .el-icon {
          @include transition('color', 1s);
          font-size: 20px;
          color: var(--text-color);
        }
      }
    }
  }

  .todo-main {
    border-radius: $border-radius;
    padding: 0 0 4.5rem 0;
    position: relative;

    .todo-done {
      margin-top: 10px;
      text-align: left;
      .unfold {
        background-color: rgba(#fff, .8);
        color: $text-color;
        margin-bottom: 4px;
      }
    }

    .no-todo-show {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      user-select: none;
      .text {
        font-size: .8rem;
        font-weight: 100;
        font-weight: bolder;
        margin-top: .5rem;
        margin-bottom: 4rem;
       color: var(--text-color);
      }
    }

    .add-todo {
      width: 100%;
      padding: 0 10px;
      position: absolute;
      bottom: 1rem;
      &-input {
        user-select: none;
        @include transition('opacity', $default-transition-duration * 2);
        ::v-deep(.el-input-group__append) {
          padding: 0;
        }
      }

      &-btns {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        ::v-deep(.el-button) {
          margin: 0;
          height: 100%;
          width: 40px;
          padding: 0;
          border: none;
          &:hover {
            background-color: #dedfe0;
          }
        }
        ::v-deep(.date-picker) {
          cursor: pointer;
          height: 100%;
          width: 40px;
          .el-input__wrapper {
            height: 100%;
            width: 100%;
            background-color: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            &:hover {
              background-color: #dedfe0;
            }
            .el-input__inner {
              width: 100%;
              height: 100%;
              caret-color: transparent;
              color: transparent;
              -webkit-user-select: none;   
              -moz-user-select: none;    
              -ms-user-select: none;    
              user-select: none;
              cursor: pointer;
            }
            .el-input__prefix {
              height: 14px;
              width: 14px;
              position: absolute;
              .el-input__prefix-inner {
                width: 100%;
                height: 100%;
                .el-icon {
                  margin: 0;
                }
              }
            }
            .el-input__suffix {
              display: none;
            }
          }
        }
      }
    }
  }
}

.drawer-content {
  position: relative;
  color: $text-color;
  text-align: left;

  .border {
    border: 1px solid $border-color;
    padding: 10px;
    border-radius: $border-radius;
    margin-bottom: 10px;
  }

  .todo-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    ::v-deep(.el-icon) {
      margin-top: 1px;
      margin-right: 5px;
    }

    .preview-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .preview-content {
      width: 100%;
      .content-input {
        width: 100%;
        border: none;
        ::v-deep(.el-input__wrapper) {
          box-shadow: none;
          padding: 0;
        }
      }
    }

  }

  @mixin ul-style() {
    ul {
      padding: 0;
      list-style: none;
      &.has-hover-style {
        li {
          cursor: pointer;
          @include transition('background-color', $default-transition-duration);
          &:hover {
            border-bottom-color: $hover-color;
            background-color: $hover-color;
          }
        }
      }
      li {
        height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: $border-radius;
        padding: 10px 10px;
        border-bottom: 1px solid $border-color;
        ::v-deep(.el-icon) {
          margin-right: 5px;
          margin-top: 1px;
        }
        &:last-of-type {
          border-bottom: none;
        }

        .label {
          white-space: nowrap;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-right: 5px;
          margin-top: -3px;
        }
      }
    }
  }

  .todo-action {
    font-size: 16px;
    @include ul-style();
  }

  .todo-info {
    @include ul-style();

    ::v-deep(.el-input__wrapper) {
      box-shadow: none;
      font-size: 16px;
      color: $text-color;
      padding: 0;
      .el-input__prefix {
        display: none;
      }
      .el-input__inner {
        color: inherit;
      }
    }

    .time {
      position: relative;
      top: 1px;
    }
  }

  .todo-note {
    padding-right: 20px;
    padding-left: 20px;
    .tips {
      font-size: 14px;
      display: block;
      margin-bottom: 10px;
    }
    .note-input {
      border: none;
      ::v-deep(.el-textarea__inner){
        border: none;
        box-shadow: none;
        padding: 0;
      }
    }
  }

  .todo-btns {
    margin-top: 20px;
    text-align: right;
  }
}
</style>